<template>
  <!-- 点到点任务最大盒子 -->
  <div class="arrange">
    <!-- 下拉菜单 -->
    <div class="origin">
      <van-dropdown-menu :overlay="false">
        <van-icon name="location-o" color="#1ed100" size="32"
          ><span>{{ value1 === "" ? "选择点位" : newonetext }}</span></van-icon
        >
        <van-dropdown-item
          @change="oneadd"
          v-model="value1"
          :options="locations"
        />
      </van-dropdown-menu>
    </div>

    <!-- 按钮区域 -->
    <div class="button">
      <van-button @click="carryout" loading-size="36px" :loading="dingShow"
        >执行</van-button
      >
    </div>
  </div>
</template>

<script>
//导入yaml
import yaml from "js-yaml";
//导入执行任务接口请求
import { issueApi } from "@/api/assignment";
import { gainApi } from "@/api/record";
export default {
  name: "Son",
  // 接收父组件中传入的值
  props: ["Standby", "newIndex", "newItem","locationd"],
  data() {
    return {
      dingShow: false, //控制加载状态的显示和隐藏
      newonetext: "", //用来保存点击的这一项的id
      onetext: "选择点位", //默认给下拉菜单的文本
      locations: [], //保存库位列表信息
      location:this.locationd, //保存库位列表信息
      value1: "", //选中的下标状态
      // iscarryout: false, //控制执行区域显示和隐藏
      // button: true, //控制按钮显示和隐藏
      // cartoon: false, //加载动画的显示和隐藏
    };
  },
 
  methods: {
    //点击选择点位的数据
    oneadd(e) {
      //筛选获取的数据中等于我点击的这一项
      let res = this.locations.filter((item) => {
        return item.value == e;
      });
      // 把他的id追加到新的变量里面进行保存
      this.newonetext = res[0].text;
      console.log(this.newonetext);
    },

    //获取库位点的数据
    async getgion() {
      // 发送请求获取数据
      let res = await gainApi();
      //把获取到的数据转换为yaml格式
      let newres = yaml.load(res.data);
      //使用filter方法筛选出符合条件的点位
      let Arr = newres.filter((item) => {
        return item.type == 0; //判断数组中是否有点位瞒住2
      });
      //使用map进行映射修改id的键为text
      this.location = Arr.map((item, index) => {
        return {
          value: index, //把下标改为value为键名
          text: item.id, //把id的键名改为text
        };
      });
      this.onetext = this.location.text;
    },

    //点击导航栏左侧返回按钮事件
    // onClickLeft() {
    //   this.$emit("isstandby", false); //声明自定义事件传入父组件中
    //   this.value1 = ""; //退出时把选择的状态数据清空
    // },
    //点击表单中提交按钮事件
    // onSubmit() {
    //   //判断选择的项等于空
    //   if (this.value1 == "") {
    //     // 提示用户
    //     this.$toast.fail("请选择点位");
    //     return; //直接return不执行下面代码
    //   }
    //   this.button = false; //点击后把按钮改为隐藏
    //   //把加载动画改为显示
    //   this.cartoon = true;
    //   // 设置计时器
    //   setTimeout(() => {
    //     this.cartoon = false; //把加载状态改为隐藏
    //     this.iscarryout = true; //把执行区域面板打开
    //     // this.$emit("isstandby", false);
    //     this.button = true; //把按钮改为显示
    //   }, 1500);
    // },
    // 执行任务按钮
    // async carryout() {
    //   this.button = false; //把按钮改为隐藏
    //   this.cartoon = true; //把加载动画改为显示
    //   setTimeout(async () => {
    //     try {
    //       //设置计时器
    //       let res = await issueApi({
    //         back_standby_point: 0, //是否返回待命点
    //         task_type: this.newIndex, //任务类型为父组件传过来的下标
    //         start_point_id: 0, //起点点id位置
    //         end_point_id: 0, //终点id位置
    //         start_column_id: 0, //列起点id
    //         end_column_id: 0, //列终点id
    //       });
    //       this.$toast.success("执行成功"); //提示用户
    //     } catch {
    //       this.$toast.fail("执行失败");
    //     }
    //     this.value1 = ""; //把选择的状态进行清空
    //     this.button = true; //把按钮改为显示
    //     this.cartoon = false; //把加载状态改为隐藏
    //     this.iscarryout = false; // 请求成功后把执行区域隐藏
    //   }, 1500);
    // },
    //点击执行按钮发送执行任务请求
    carryout() {
      //判断选择点位的数据等于空
      if(this.newonetext == ''){
        this.newonetext =0
      }
      // 把加载状态改为true
      this.dingShow = true;
      setTimeout(async () => {
        try {
          let res = await issueApi({
            back_standby_point: 0, //是否返回待命点
            task_type: this.newIndex, //任务类型为父组件传过来的下标
            start_point_id: 0, //起点点id位置
            end_point_id: this.newonetext, //终点id位置
            start_column_id: 0, //列起点id
            end_column_id: 0, //列终点id
          });
          //提示用户执行成功
          this.$toast.success("执行成功");
          //把点位设置为空
          this.value1 = "";
          console.log(res);
        } catch {
          // 提示用户执行失败
          this.$toast.fail("执行失败");
        }
        //把加载状态改为false
        this.dingShow = false;
        //清空数据
        this.value1=''
      }, 1500);
    },
  },
  //在created钩子函数中调用
  created() {
    //this.getgion(); //一开页面调用该方法
    let newVal = this.locationd;
    let Arr = newVal.filter((item) => {
        return item.type == 0; //判断数组中是否有点位瞒住2
      });
      //使用map进行映射修改id的键为text
      this.locations = Arr.map((item, index) => {
        return {
          value: index, //把下标改为value为键名
          text: item.id, //把id的键名改为text
        };
      });
      this.onetext = this.location.text;
      console.log(this.locations)
  },
};
</script>

<style lang="less" scoped>
.arrange {
  position: relative;
  width: 100%;
  ::v-deep .van-dropdown-menu__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 200px !important;
    cursor: pointer;
    background-color: skyblue !important;
    height: 20px !important;
  }
  ::v-deep .van-popup {
    width: 240px;
    height: 500px;
    margin-left: 704px;
    border: none !important;
    .van-button {
      position: fixed;
      left: 25%;
      width: 400px;
      height: 50px;
      border-radius: 20px;
      font-size: 22px;
    }
    .van-dropdown-item__content {
      position: absolute;
      max-height: 100%;
    }
  }
  .van-dropdown-menu {
    position: relative;
    // padding: 0 10px;
    margin-bottom: 20px;
    width: 240px !important;
    .van-icon {
      position: absolute;
      top: 5px;
      left: 20px;
      span {
        width: 80px;
        position: absolute;
        top: -8px;
        line-height: 50px;
        font-size: 16px;
        color: black;
        margin-left: 10px;
      }
    }
  }
  ::v-deep .van-dropdown-menu__bar {
    position: relative;
    display: flex;
    height: 40px;
    background-color: skyblue;
    box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
  }
  ::v-deep .van-dropdown-menu__title::after {
    position: absolute;
    top: 50%;
    right: 60px;
    margin-top: 5px;
    border: 3px solid;
    border-color: transparent transparent #dcdee0 #dcdee0;
    transform: rotate(-45deg);
    opacity: 0.8;
    content: "";
  }
  .button {
    margin-left: 5px;
    position: absolute;
    top: -17px;
    right: 10px;
    .van-button {
      border: none;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      width: 65px;
      height: 42px;
      background-color: #3ab9bc;
    }
  }
}
</style>
